#include('./header.html',{active:'pages', title:'页面管理'})
<div id="app" class="row" v-cloak>
    <loading :active.sync="isLoading" :can-cancel="true"></loading>
    <div class="col-lg-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">页面管理</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="pull-right">
                        <a href="/admin/page/new" class="btn btn-success waves-effect waves-light m-b-5">添加新页面</a>
                    </div>
                </div>
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>页面名称</th>
                                <th>页面路径</th>
                                <th width="20%">发布时间</th>
                                <th width="12%">发布状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in articlePage.rows">
                                <td>{{ item.title }}</td>
                                <td>{{ item.slug }}</td>
                                <td>{{ item.created | formatUnix }}</td>
                                <td>
                                    <span v-show="item.status == 'publish'">已发布</span>
                                    <span v-show="item.status == 'draft'">草稿</span>
                                </td>
                                <td>
                                    <a :href="'/admin/page/edit/' + item.cid" class="btn btn-primary btn-sm waves-effect waves-light m-b-5">
                                        <i class="fa fa-edit"></i> <span>编辑</span>
                                    </a>
                                    <a @click="deleteArticle(item.cid)" href="javascript:void(0)" class="btn btn-danger btn-sm waves-effect waves-light m-b-5">
                                        <i class="fa fa-trash-o"></i> <span>删除</span>
                                    </a>
                                    <a class="btn btn-warning btn-sm waves-effect waves-light m-b-5" :href="'${site_url()}/' + item.slug"
                                       target="_blank">
                                        <i class="fa fa-rocket"></i> <span>预览</span>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <ul class="pagination m-b-5 pull-right">
                        <li v-if="articlePage.hasPrevPage">
                            <a @click="load(articlePage.prevPage)" aria-label="Previous">
                                <i class="fa fa-angle-left"></i>&nbsp;上一页
                            </a>
                        </li>

                        <li class="page-item" v-for="num in articlePage.navPageNums" :class="{ active: articlePage.pageNum == num }">
                            <a @click="load(num)">
                                {{ num }}</i>
                            </a>
                        </li>
                        <li v-if="articlePage.hasNextPage">
                            <a type="button" class="page-link" @click="load(articlePage.nextPage)">
                                下一页&nbsp;<i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li><span>共 {{articlePage.totalPages}} 页</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

#include('./footer.html')

<script >
    var tale = new $.tale();
    var vm = new Vue({
        el: '#app',
        data: {
            articlePage: {},
            isLoading: true
        },
        beforeCreate: function () {
            vueLoding = this.$loading.show();
        },
        mounted: function () {
            this.load(1);
        },
        methods: {
            load: function (page) {
                var $vm = this;
                tale.get({
                    url: '/admin/api/pages',
                    data: {
                        page: page,
                        limit: 12
                    },
                    success: function (data) {
                        $vm.articlePage = data.payload
                    },
                    error: function (error) {
                        console.log(error);
                        alert(result.msg || '数据加载失败');
                    }
                });
            },
            deleteArticle: function (cid) {
                var $vm = this;
                tale.alertConfirm({
                    title: '确定删除这个页面吗?', then: function () {
                        tale.post({
                            url: '/admin/api/page/delete/' + cid,
                            success: function (result) {
                                if (result && result.success) {
                                    tale.alertOk('页面删除成功');
                                    $vm.load(1);
                                } else {
                                    tale.alertError(result.msg || '页面删除失败');
                                }
                            }
                        });
                    }
                });
            }
        }
    });

    $(document).ready(function () {
        vm.isLoading = false;
        vueLoding.hide();
    });
</script>
</body>
</html>